<template>
	<view>
		<image class="logo" mode="widthFix" src="https://candlelight-1252498605.cos.ap-guangzhou.myqcloud.com/bg.jpg">
		</image>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<input v-model="nickName" type="nickname" class="weui-input" placeholder="请输入昵称" />
		<button class="login" open-type="getUserInfo" @tap="login"><i class="iconfont icon-weixin">登录</i></button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				nickName: ''

			}
		},
		methods: {
			login: function() {
				let that = this
				uni.login({
					provider: 'weixin',
					success(r) {
						let code = r.code
						if (that.avatarUrl ==
							'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
						) {
							uni.showToast({
								icon: 'none',
								title: '头像不能为空'
							})
							return
						}
						if (that.nickName == '') {
							uni.showToast({
								icon: 'none',
								title: '昵称不能为空'
							})
							return
						}
						let data = {
							code: code,
							nickName: that.nickName,
							avatarUrl: that.avatarUrl
						}
						that.ajax(that.url.baseUrl + "login", "POST", data, function(resp) {
							console.log(resp)
							uni.setStorageSync("token", resp.data.token);
							uni.setStorageSync("name", resp.data.data.name);
							uni.setStorageSync("imgUrl", resp.data.data.imgUrl);
							uni.setStorageSync("inviteCode", resp.data.data.inviteCode);
							uni.setStorageSync("userId", resp.data.data.id);
							uni.redirectTo({
								url: "/pages/bind/bind"
							})
						})

					}
				})
			},
			onChooseAvatar(e) {
				console.log(e)
				this.avatarUrl = e.target.avatarUrl

			}
		},
		onLoad() {
			let token = uni.getStorageSync("token")
			if (token != '' && token != null) {
				uni.redirectTo({
					url: '/pages/bind/bind'
				})
			}
		}
	}
</script>

<style lang="less">
	@import "../../static/iconfont/icon.css";

	.logo {
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		opacity: .3;
		height: 100vh;
	}

	.avatar-wrapper {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 20%;
		width: 100px;
		height: 100px;
		padding: 0;
		margin: 0;
		border-radius: 100px;
		.avatar {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.weui-input {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		top: 40%;
		border: 1px solid ghostwhite;
		border-radius: 5px;
		width: 40%;
		height: 20px;
	}

	.login {
		bottom: 20%;
		position: absolute;
		bottom: 20%;
		left: 10%;
		width: 80%;
		background-color: limegreen;
		border: 0px;
		height: 50px;
		line-height: 50px;
		color: ghostwhite;
	}
</style>
